<!DOCTYPE html>
<html>


<head>

    <!--引入公用模板-->
    <%- include ../taglib/layout-main-map.ejs %>
    <!--<style type="text/css">-->
        <!--div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}-->
        <!--div#rMenu a{-->
            <!--cursor: pointer;-->
            <!--list-style: none outside none;-->
        <!--}-->
    <!--</style>-->
    <style type="text/css">
        div#rMenu {
            position:absolute;
            visibility:hidden;
            top:0;
            background-color: #555;
            text-align: left;
            padding: 2px;
        }
        div#rMenu ul li{
            margin: 2px 0;
            padding: 0 2px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
        }
    </style>
</head>

<body>

<section id="main-wrapper" class="theme-default">
    <div id="rMenu">
        <!--<a href="#" class="list-group-item" onclick="expand();">展开下一级</a>-->
        <!--<a href="#" class="list-group-item" onclick="expandSon();">展开所有子节点</a>-->
        <!--<a href="#" class="list-group-item" onclick="collapse();">折叠子节点</a>-->
        <a href="#" class="list-group-item" onclick="expandAll();">全部展开</a>
        <a href="#" class="list-group-item" onclick="collapseAll();">全部折叠</a>
    </div>
    <!--sidebar head start-->
    <%- include ../taglib/header.ejs %>
    <!--sidebar head end-->

    <!--sidebar left start-->
    <%- include ../taglib/left.ejs %>
    <!--sidebar left end-->
    <!--main content start-->
    <section class="main-content-wrapper ">
        <div class="pageheader">
            <h1>实时监控</h1>
            <div class="breadcrumb-wrapper hidden-xs">
                <span class="label">图例:</span>
                <ol class="breadcrumb">
                    <li>静止
                    </li>
                    <li>行驶</li>
                    <li class="active">报警</li>
                </ol>
                <button type="button" class="btn btn-info btn-xs" onclick="displayMap()" id="closeTree">关闭树</button>
                <button type="button" class="btn btn-info btn-xs" onclick="displayLeft()"  id="openTree">打开树</button>
                <button type="button" class="btn btn-info btn-xs" onclick="displayTable()" id="closeTree">打开列表</button>
                <button type="button" class="btn btn-info btn-xs" onclick="displayMapTable()" id="closeTree">隐藏列表</button>

            </div>
        </div>

        <section id="main-content " class="animated fadeInUp">
            <!--button start-->
            <div class="row mapcontent">
                <div class="col-md-3 mappdding-0"  id="mapleft" >
                    <div class="panel panel-default" id="treeView">
                        <!--<div class="panel-heading">-->
                            <!--&lt;!&ndash;<h3 class="panel-title">设备数据</h3>&ndash;&gt;-->
                            <!--<div class="actions pull-right">-->
                                <!--&lt;!&ndash;<i class="fa fa-expand"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;<i class="fa fa-chevron-down"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;<i class="fa fa-times"></i>&ndash;&gt;-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="panel-body">

                            树菜单
                            <ul id="kindTree" class="ztree">
                            </ul>
                            <!--<button type="button" class="btn btn-default">Default</button>-->
                            <!--<button type="button" class="btn btn-primary">Primary</button>-->
                            <!--<button type="button" class="btn btn-success">Success</button>-->
                            <!--<button type="button" class="btn btn-info">Info</button>-->
                            <!--<button type="button" class="btn btn-warning">Warning</button>-->
                            <!--<button type="button" class="btn btn-danger">Danger</button>-->
                        </div>

                    </div>
                </div>
                <div class="col-md-9 mappdding-0"  id="mapright" >

                    <div class="row  mappdding-0">
                        <div class="col-md-12 "  id="mapView">
                            <div class="panel panel-default realmappanel">
                                <!--<div class="panel-heading">-->
                                    <!--&lt;!&ndash;<h3 class="panel-title">实时监控</h3>&ndash;&gt;-->
                                    <!--<div class="actions pull-right">-->
                                        <!--&lt;!&ndash;<i class="fa fa-expand"></i>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<i class="fa fa-chevron-down"></i>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<i class="fa fa-times"></i>&ndash;&gt;-->
                                    <!--</div>-->
                                <!--</div>-->
                                <div class="panel-body realmappanel">
                                    <div style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                                        <div id="map"
                                             style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
                                        <!--<div id="app-right-top">-->
                                            <!--<div id="user-center" class="ui3-user-center-wrap">-->
                                                <!--<div class="avatar-abstract"></div>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    </div>
                                    <!--<div class="panel panel-default maptable" style="position: absolute;bottom:300px">-->
                                        <!--<div class="panel-heading">-->
                                            <!--<h3 class="panel-title">其他数据</h3>-->
                                            <!--<div class="actions pull-right">-->
                                                <!--&lt;!&ndash;<i class="fa fa-expand"></i>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<i class="fa fa-chevron-down"></i>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<i class="fa fa-times"></i>&ndash;&gt;-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--<div class="panel-body">-->
                                            <!--车辆、报警等数据。222-->
                                        <!--</div>-->
                                    <!--</div>-->
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="row  mappdding-0">
                        <div class="col-md-12">
                            <div class="panel panel-default maptable" id="tableView">
                                <div class="panel-heading">
                                    <h3 class="panel-title">其他数据</h3>
                                    <div class="actions pull-right">
                                        <!--<i class="fa fa-expand"></i>-->
                                        <!--<i class="fa fa-chevron-down"></i>-->
                                        <!--<i class="fa fa-times"></i>-->
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <table id="example" class="table table-striped table-bordered table-hover dataTables-example" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <!--<th>操作</th>-->
                                            <th width="180px">车牌号</th>
                                            <th width="200px">定位时间</th>
                                            <th width="200px">通信时间</th>
                                            <th width="180px">客户</th>
                                            <th width="80px">定位</th>
                                            <th width="200px">状态</th>
                                            <th width="200px">设备编号</th>
                                            <th width="150px">SIM卡</th>
                                            <th width="80px">速度</th>
                                            <th width="80px">方向</th>
                                            <th width="180px">日里程</th>
                                            <th width="180px">月里程</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>`

                    </div>
                </div>
            </div>

            <!--button end-->
        </section>
    </section>
    <!--main content end-->
</section>
<!--sidebar right start-->
<%- include ../taglib/right.ejs %>
<!--/sidebar right end-->
<!--Config demo-->
<!--<%- include ../taglib/config.ejs %>-->

<!--/Config demo-->
<script >
    var dHeight=0;
    $(function () {
        dHeight=document.body.clientHeight;
        debugger;
        setMapView(dHeight,true);
        debugger;
//        app.navToggleLeft();

    });
 function setMapView(dHeight,flag) {
     if(flag){
         var treeHeight=dHeight-60-85;
         $("#treeView").height(treeHeight);
         $("#mapView").height(treeHeight);
//        $("#tableView").show();
         $("#tableView").hide();
     }else {
         var treeHeight=dHeight-60-85;
         $("#treeView").height(treeHeight);
         $("#mapView").height(treeHeight-205);
        $("#tableView").show();
     }
 }
    function displayMap() {
        $("#mapleft").css('display','none');
//        $("#closeTree").css('display','none');
//        $("#openTree").css('display','block');
        $("#mapright").removeClass("col-md-9").addClass("col-md-12");//.css("padding-left","30px");


    }
    function displayLeft() {
        $("#mapleft").css('display','block');
//        $("#closeTree").css('display','block');
//        $("#openTree").css('display','none');
        $("#mapright").removeClass("col-md-12").addClass("col-md-9");//.css("padding-left","5px");;


    }
    function displayTable() {
//        $("#closeTree").css('display','block');
//        $("#openTree").css('display','none');
        setMapView(dHeight,false);


    }function displayMapTable() {
//        $("#closeTree").css('display','block');
//        $("#openTree").css('display','none');
        setMapView(dHeight,true);

    }
    //    部门车辆树
    var urlTree;
    $(function () {
        urlTree = '/tree/deptCar';
        init_tree('id', 'parentId', 'name', fnClick, fnCheck, "checkbox",OnRightClick);
        loadMyTree(urlTree);
    });
    var carno="";

    //    树节点选中
    var fnClick = function (event, treeId, treeNode) {
        var flag=treeNode.checked;
//        tree_Obj.checkAllNodes(false);
        tree_Obj.checkNode(treeNode, true, true);
//        cleanAll();
        debugger;
        selectTreeNode(treeNode,true);

    }

    //    复选框选中
    var fnCheck = function (event, treeId, treeNode, clickFlag) {
        var ids=selectTreeNode(treeNode,false);
        cleanAll();
//        queryCarsByNo(ids,"1")
    }
    function selectTreeNode(treeNode,flag) {
        var isCar = treeNode.isCar
        var tChecked = treeNode.checked;
        var ids = setAllCarIds();
        if (isCar) {
            var baseCarNo=treeNode.name;
            if(tChecked){
                if(flag){
                    $("#h_c_car_baseCarNo").val(baseCarNo);
                    $("#h_c_car_id").val(treeNode.id);
                }
                carno=baseCarNo;
//                queryCarsByNo(treeNode.id,"0",baseCarNo);
            }else{
                $("#h_c_car_id").val("");
            }

        }
        queryCars();
//        if (!tChecked) {
//            cleanAll()
//        }
        return ids;
    }
    function setAllCarIds() {
        var checkNodes = tree_Obj.getCheckedNodes(true);
        var ids = "";
        $.each(checkNodes, function (key, value) {
            var flag = value.isCar
            if (flag) {
                ids = ids + value.id + ","
                carno=value.name;
            }
        });
        $("#h_all_car_id").val(ids);
        return ids;
    }
    // 在ztree上的右击事件
    var OnRightClick=function OnRightClick(event, treeId, treeNode) {
        debugger;
        if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            showRMenu("node", event.clientX, event.clientY);
        }
    }
    var rMenu = $("#rMenu");
    //显示右键菜单
    function showRMenu(type, x, y) {
        debugger
        $("#rMenu ul").show();

        rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible",'z-index':999}); //设置右键菜单的位置、可见
        $("body").bind("mousedown", onBodyMouseDown);
    }
    //隐藏右键菜单
    function hideRMenu() {
        if (rMenu) rMenu.css({"visibility": "hidden"}); //设置右键菜单不可见
        $("body").unbind("mousedown", onBodyMouseDown);
    }
    //鼠标按下事件
    function onBodyMouseDown(event){
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
            rMenu.css({"visibility" : "hidden"});
        }
    }
    //展开下一级子节点
    function expand(){
        hideRMenu();
        var selectNodes = tree_Obj.getSelectedNodes();
        tree_Obj.expandNode(selectNodes[0], true, null, null);
    }
    //展开所有子节点
    function expandSon(){
        hideRMenu();
        var selectNodes = tree_Obj.getSelectedNodes();
        tree_Obj.expandNode(selectNodes[0], true, true, null);
    }
    //折叠子节点
    function collapse(){
        hideRMenu();
        var selectNodes = tree_Obj.getSelectedNodes();

        tree_Obj.expandNode(selectNodes[0], false, null, null);
    }
    //全部展开
    function expandAll(){
        hideRMenu();
        tree_Obj.expandAll(true);
    }
    //全部折叠
    function collapseAll(){
        hideRMenu();
        tree_Obj.expandAll(false);
    }
</script>


<!--map-->
<script type="text/javascript">
    // 百度地图API功能
    var map;
    var panorama;
    var carIocnPath = "/js/mapPlugins/img/";
    var lastMark = [];
    var lastCarMark = {};//终端数组
    var opts = {
        width: 350,     // 信息窗口宽度
        height: 0,     // 信息窗口高度
//        width : 0,
//        height: 0,
//        title : "实时信息" , // 信息窗口标题
        panel: "panel",
        enableMessage: true,//设置允许信息窗发送短息
        searchTypes: [
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    };
    //    var carIcon="car_online0.fw";
    $(function () {
        map = new BMap.Map('map');
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();
        map.addControl(new BMap.MapTypeControl());


        var contextMenu = new BMap.ContextMenu();
        var txtMenuItem = [
            {
                text: '放大',
                callback: function () {
                    map.zoomIn()
                }
            },
            {
                text: '缩小',
                callback: function () {
                    map.zoomOut()
                }
            },
            {
                text: '放置到最大级',
                callback: function () {
                    map.setZoom(18)
                }
            },
            {
                text: '查看全国',
                callback: function () {
                    map.setZoom(4)
                }
            },
            {
                text: '关闭实景地图',
                callback: function () {
                    exitqj();
                }
            },
            {
                text: '在此添加标注',
                callback: function (p) {
                    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                    map.addOverlay(marker);
                }
            }
        ];
        for (var i = 0; i < txtMenuItem.length; i++) {
            contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
            if (i == 1 || i == 3) {
                contextMenu.addSeparator();
            }
        }
        map.addContextMenu(contextMenu);
        var jw = '<%= jw %>';
        initPoint(jw);


//
        panorama = new BMap.Panorama('map');
        panorama.setPov({heading: -40, pitch: 6});
        var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(50, 50));
        map.addControl(stCtrl);//添加全景控件
    });



    //刷新车辆列表
    function queryCars() {
        var allCarIds = $("#h_all_car_id").val();
        var jsonstr = [{"allCarIds": allCarIds}];
        gpsTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }
    //刷新报警列表
    function querywarnings() {
//        var start = $("#start").val();
//        var end = $("#end").val();
//        var code = $("#serchStr").val();
        var jsonstr = [];
        warningTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
        var info=warningTable.DataTable().rows().data();
        if(info && info.length>0){
//            play_sound();
        }
        var recordsTotal=info.recordsTotal;
    }
    //刷新车辆状态标题
    function querycartitle() {
        $.ajax({
            async: false,
            url: '/map/cartitle',
            type: "get",
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    var resData = data.data;
                    var warningtitle = "";

                    if (resData) {
                        warningtitle = "状态信息:操作日志(全部 " + resData.totalNum + ",在线：" + resData.onlineNum + ",离线：" + resData.offlineNum + ",行驶：" + resData.speedNum + ",停车：" +
                            resData.stopNum + ",在线率：" + resData.rate + ")"
                    } else {
                        warningtitle = "状态信息:操作日志(全部 " + 0 + "在线：" + 0 + " 离线：" + 0 + "行驶：" + 0 + " 停车：" + 0 + " 在线率：" + 100 % +")"

                    }
                    $("#warningRef").html(warningtitle);
                    $("#allcar").html("全部("+resData.totalNum+")");
                    $("#onlinecar").html("在线("+resData.onlineNum+")");
                    $("#offlinecar").html("离线("+resData.offlineNum+")");


                } else {
//                    swal({
//                        title: "系统提示",
//                        text: data.msg,
//                        type: "error"
//                    });
                }

            }
        })

    }
    //    ajax获取数据：根据车牌号获取实时数据，
    //    车牌号逗号分隔
    //    ismanyIds=0dange  =1duoge

    function queryCarsByNo(carIds,ismanyIds,baseCarNo) {
        $.ajax({
            async: false,
            url: '/map/cars',
            type: "post",
            dataType: 'json',
            data: {
                carIds: carIds,
                ismanyIds:ismanyIds
            },
            success: function (data) {
                if (data) {
//                    var length1=carIds.split(",").length;
                    var resData = data.data;
                    debugger;
                    debugger;
                    var length=resData.length;
                    $.each(resData, function (key, value) {
                        var carObj = value;
                        //0绿色是跑的，1红色是异常的，2灰色是离线的,3蓝色是停止的，
                        var carError = 0;
                        var carstatus = "在线停止状态";
//                        点火， 熄火
                        var accstatus = "熄火";
                        var addressDetail = "无详细地址信息!";
                        //jwToAddress(carObj.jd,carObj.wd);
                        var myGeo = new BMap.Geocoder();
                        myGeo.getLocation(new BMap.Point(carObj.jd, carObj.wd), function (result) {
                            if (result) {
                                addressDetail = result.address;
                            }
                            if (carObj.onlineName == "0") {
                                carError = 2;
                                carstatus = "离线状态";
                            } else if (carObj.accFlag == "0") {
                                carError = 3;
                            } else if (carObj.accFlag == "1") {
                                carError = 0;
                                carstatus = "在线行驶状态"
                            }
//                            else if (carObj.onlineName == "1" && parseInt(carObj.speed) == 0) {
//                                carError = 3;
//                            } else if (carObj.onlineName == "1" && parseInt(carObj.speed) > 0) {
//                                carError = 0;
//                                carstatus = "在线行驶状态"
//                            }

                            if (carObj.accFlag == "1") {
                                accstatus = "点火";
                            }
                            var gpsPowerStatus = carObj.gpsPowerStatus;
                            var acc = carObj.accFlag;
                            var oneHigh = carObj.oneHigh;
                            var str=""
                            if(gpsPowerStatus == 1){
                                str="主电正常, "
                            }else{
                                str="主电异常, "
                            }
                            if (acc == 1) {
                                str = str+"点火, "
                            }else{
                                str = str+"熄火, "
                            }
                            if(oneHigh){
                                str=str+" 时长: "+oneHigh+"分钟"
                            }else{
                                str=str+" 时长: 0 分钟"
                            }
                            var content ='<div style="border:1px"><h4 style="margin:0 0 5px 0;padding:0.2em 0">实时信息</h4>' +
                                '<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '车牌号：<span style="font-size:12px;">' +carObj.baseCarNo+ '</span>  </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '定位时间：<span style="font-size:12px;">' +carObj.gpsDate+ '</span> </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '终端号：<span style="font-size:12px;">' +carObj.terminal+ '</span> </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '当日里程：<span style="font-size:12px;">' +carObj.daydis+ '</span> </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '行驶速度：<span style="font-size:12px;">' +carObj.speed+ '</span> </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '状态：<span style="font-size:12px;">' +carstatus+ '</span> </p>'
                                +'<p style="margin:0;line-height:1.5;font-size:15px;text-indent:2em">' +
                                '当前位置：<span style="font-size:12px;">' +addressDetail+ '</span> </p>'  +
                                '<div class="row">' +
                                '<div class="col-sm-3">' +
                                '   <button class="btn  btn-mini btn-primary btn-block m-t" onclick="editGps(0,'+carObj.id+')"><i class="fa fa-edit"></i>车辆</button>' +
                                '</div>' +
                                '<div class="col-sm-3">' +
                                '   <button class="btn btn-mini btn-primary btn-block m-t" onclick="openSj(\''+carObj.wd+'\',\''+carObj.jd+'\')"><i class="fa fa-map"></i>实景</button>' +
                                '</div>' +
                                '<div class="col-sm-3">' +
                                '   <button class="btn btn-mini btn-primary btn-block m-t" onclick="openhis('+carObj.id+',\''+carObj.baseCarNo+'\')"><i class="fa fa-map-marker"></i> 轨迹</button>' +
                                '</div>' +
                                '<div class="col-sm-3">' +
                                ' <button class="btn btn-primary btn-block m-t" onclick="openzz('+carObj.id+',\''+carObj.jd+'\',\''+carObj.wd+'\')"><i class="fa fa-arrow-down"></i> 追踪</button>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                "</div>";
                            var panTo=false
                            baseCarNo=$("#h_c_car_baseCarNo").val();
                            if(baseCarNo && baseCarNo==carObj.baseCarNo){
                                panTo=true;
                            }
//                            else
//                                if(key === length - 1){
//                                panTo=true
//                            }
//                            if(!baseCarNo){
//                                panTo=false;
//                            }
//                                alert(panTo);
//                                if(length1>1){
//                                    panTo=false;
//                                }
                            addMarker(carObj.wd, carObj.jd, carObj.baseCarNo, carObj.driection, carError, content,panTo);


                        });


                    });

                } else {
//                    swal({
//                        title: "系统提示",
//                        text: data.msg,
//                        type: "error"
//                    });
                }

            }
        })
    }
    //    刷新数据
    var refData = function refCarsById() {
        cleanAll();
        var carId = $("#h_c_car_id").val();
        var carIds=$("#h_all_car_id").val();
        if(carIds){
            queryCarsByNo(carIds,"1",carno);

        }else{
            queryCarsByNo(carId,"0",carno);

        }
        queryCars();
//        querywarnings();
//        querycartitle();
//        loadMyTree(urlTree);
    }
    //    刷新数据
    var refData1 = function refCarsById() {
//        cleanAll();
//        var carId = $("#h_c_car_id").val();
//        var carIds=$("#h_all_car_id").val();
//        if(carIds){
//            queryCarsByNo(carIds,"1",carno);
//
//        }else{
//            queryCarsByNo(carId,"0",carno);
//
//        }
//        queryCars();
        querywarnings();
        querycartitle();
//        loadMyTree(urlTree);
    }


    /**
     * 清除标注
     */
    function clean() {
        map.clearOverlays();
    }

    function openhis(id,carNo) {
        window.open("/map/his?carId="+id+"&carNo="+carNo);
    }
    function openzz(carid,jd,wd) {
        window.open("/map/carmap?carId="+carid+"&jd="+jd+"&wd="+wd);
    }
    var traffic=new BMap.PanoramaCoverageLayer()
    function openSj(wd,jd) {
        debugger;
        map.addTileLayer(traffic);
        panorama.show();
        panorama.setPosition(new BMap.Point(jd, wd));
//        panorama.setOptions({
//            navigationControl: false //显示导航控件
//        });
    }
    function editGps(index,id) {
        $.ajax({
            type: "GET",
            url: "/baseCar/edit",
            cache: false,
            async: false,
            data:{
                id: id
            },
            dataType: "json",
            success: function (data) {
                $('#editForm').loadDate(data);
                $("#myModal").modal("show");
            }
        });

    }
    function closeModal() {
        $("#myModal").modal("hide");
    }
</script>
<script>
    var gpsTable;
    $(document).ready(function() {
        gpsTable = $('#example').dataTable({
            "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "100px",//dt高度
//            "scrollX": true,
            "autoWidth": true,//自动宽度
            "paging": false, // 禁止分页
            "bSort": false,
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "ajax": {
//                "url": "/map/terminalsoff",
//                "dataSrc": "rows"
//            },
//            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    },

                },
//                {"sClass": "text-center", data: 'id'},
//                {
//                    "bSortable": false,//禁止排序
//                    "orderable": false,
//                    "sClass": "text-center",
//                    data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
//                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                        var id = d.id
//                        var index = g.row
//                        return '' +
//                            '<button class="btn btn-info btn-sm btn-select-row" type="button" ' +
//                            'onclick="editGps(' +index+','+ id + ')" data-toggle="modal"   >' +
//                            '<i class="fa fa-edit"></i> <span class="bold">查看车辆</span>';
//                    }
//                },
                //禁止排序
                {"sClass": "text-center", data: 'baseCarNo', "bSortable": false, "orderable": false},

                {"sClass": "text-center", data: 'gpsDate', "bSortable": false, "orderable": false},
                {
                    "sClass": "text-center", data: "onlinetime", "bSortable": false, "orderable": false
                },
                {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'elType', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'baseCarNoColour'},
//                定位
                {
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    var gpsDate = e.gpsDate;
                    var onlinetime = e.onlinetime;
                    var result = "是";
                    if(gpsDate && onlinetime){
                        debugger;
                        var totalMilliseconds = Math.abs(Date.parse(new Date(gpsDate)) - Date.parse(new Date(onlinetime)));
                        var totalMinutes=parseInt(totalMilliseconds / 1000 / 60);
                        if(totalMinutes>2){
                            result="否"
                        }
                    }else{
                        result="否"
                    }
                    return result
                }, "bSortable": false, "orderable": false
                },
//                状态：主电正常，熄火，时长
                {
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    var gpsPowerStatus = e.gpsPowerStatus;
                    var acc = e.accFlag;
                    var oneHigh = e.oneHigh;
                    var sc=Math.floor(oneHigh/60) + "小时" + Math.floor(oneHigh%60) + "分" ;
                    var str=""
                    if(gpsPowerStatus == 1){
                        str="主电正常, "
                    }else{
                        str="主电异常, "
                    }
                    if (acc == 1) {
                        str = str+"点火, "
                    }else{
                        str = str+"熄火, "
                    }
                    if(oneHigh){
                        str=str+" 时长: "+sc
                    }else{
                        str=str+" 时长: 0 分钟"
                    }



//                    var result = '<a class="btn btn-warning btn-rounded" >熄火</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >点火</a>'
//                    }
                    return str
                }, "bSortable": false, "orderable": false
                },
//                {
//                    "sClass": "text-center", data: "oneHigh", "bSortable": false, "orderable": false
//                },
//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    var d = e.gpsPowerStatus;
////                    1=正常  0=异常
//                    var result = '<a class="btn btn-warning btn-rounded" >异常</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >正常</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
//                {
////                    online
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
////                    debugger;
////                    accFlag
//                    var d = e.online;
//                    var result = '<a class="btn btn-info btn-rounded" >在线</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-info btn-rounded" >在线</a>'
//                    } else if (d == 0) {
//                        result = '<a class="btn btn-danger btn-rounded" >离线</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
                {"sClass": "text-center", data: 'terminal', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'sim', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'speed', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'driection', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    var driection = e.driection;
                    if(driection){
                        return queryAngle(driection);
                    }else{
                        return "北"
                    }


                }, "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'daydis', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'monthDis', "bSortable": false, "orderable": false}
//                {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},





//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    var jd = e.jd;
//                    var wd = e.wd;
//                    var result = jd + wd;
//                    return result
//                }, "bSortable": false, "orderable": false
//                },

            ],
            //排序
//            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
//                visiblecolumn(gpsTable, 0, false);
//                visiblecolumn(gpsTable,13, false);
//                visiblecolumn(gpsTable,11, false);
//                visiblecolumn(gpsTable,12, false);
//                visiblecolumn(6,false)
            },
        });
        $('#gpsTable tbody').on('click', 'tr', function () {
            $('#gpsTable tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    cleanAll();
                } else {
                    gpsTable.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    var row = gpsTable.DataTable().rows('.selected').data()[0];
                    var carId = row.id;
                    $("#h_c_car_id").val(carId);
                    queryCarsByNo(carId,"0");
                }

            });

        });
    });
</script>
</body>

<!-- Mirrored from www.zi-han.net/theme/hplus/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:17:11 GMT -->
</html>